<template>
  <div class>
    <naviHeader></naviHeader>
    <div>
      <div class="select-container">
        <input type="text" v-model="name" placeholder="请输入关键字">
        <div class="selectBtn" v-on:click="selectBtn">搜索</div>
      </div>

      <div class="content-container">
        <div class="content" v-show="list.length === 0">暂无相关课程</div>

        <!-- <pull-to :top-load-method="init" :bottom-load-method="getMoreData"> -->
          <div class="recommend-container">
            <div v-for="item in list" :key="item.index">
              <router-link :to="{name: 'courseList', params: {id: item.id}}">
                <div class="item">
                  <div>
                    <img class="poster" v-bind:src="imgBaseUrl + item.coverUrl" alt>
                  </div>
                  <div>
                    <div class="title">{{item.name}}</div>
                    <div class="info">
                      <div>{{item.buyNumber}}人购买</div>
                      <div class="price">{{item.price}}</div>
                    </div>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
        <!-- </pull-to> -->

      </div>
    </div>
  </div>
</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";
import { getAlbumList, selectAlbum } from "../../service/getData";
import { imgBaseUrl } from "../../config/env";
import PullTo from "vue-pull-to";

export default {
  data() {
    return {
      imgBaseUrl: imgBaseUrl,
      list: [],
      indirectClassmates: [],
      classmates: [],
      selectList: [],
      name: "",
      pageNumber: 1,
      hasMore: true
    };
  },
  mounted() {
    this.init();
  },
  components: {
    naviHeader,
    PullTo
  },
  watch: {
    name: function() {
      if (!this.name) {
        this.list = this.ablumList;
      }
    }
  },
  methods: {
    init: function() {
      getAlbumList(this.$store.userToken, 1).then(res => {
        this.ablumList = res.content;
        this.list = res.content;
      });
    },
    selectBtn: function() {
      selectAlbum(this.$store.userToken, this.name, 1).then(res => {
        this.selectList = res.content;
        this.list = res.content;
      });
    },
    getMoreData: function() {
      if (!this.hasMore) return;
      var pageNumber = this.pageNumber + 1;
      getAlbumList(this.$store.userToken, pageNumber, this.name).then(res => {
        var data = [];
        if (this.classmates.length === 0) {
          data = res.content;
        } else {
          data = this.classmates.concat(res.content);
        }

        if (res.content.length < 20) {
          this.hasMore = false;
        }
        this.classmates = data;
        this.list = data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.select-container {
  @include fj(space-around);
  align-items: center;
  height: 2rem;
  line-height: 2rem;
  background: #fff;
  border-bottom: 2px solid #f1f1f1;

  input {
    width: 6.5rem;
    height: 1rem;
    line-height: 1rem;
    border: 2px solid #f1f1f1;
    padding: 0.2rem;
    margin-left: 0.3rem;
    border-radius: 10px;
  }

  .selectBtn {
    width: 2rem;
    text-align: center;
  }
}

.content-container {
  .content {
    @include sc(0.4rem, #000);
    @include fj(center);
    align-items: center;
    background: #f1f1f1;
    height: 4rem;
    width: 100%;
  }
}

// 推荐
.recommend-container {
  background: #fff;

  .item {
    @include fj(space-between);
    margin: 0.2rem 0.1rem 0.2rem 0.1rem;
    border-bottom: 2px solid #f1f1f1;

    .poster {
      width: 3.5rem;
      height: 2.6rem;
      margin: 0rem 0.1rem;
    }

    .title {
      font-size: 0.34rem;
      height: 2rem;
      padding: 0.1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .info {
      @include fj(space-between);
      padding: 0.1rem;

      .price {
        color: #049009;
        margin: 0rem 0.1rem;
        font-size: 0.35rem;
      }

      .price::before {
        content: "￥";
        font-size: 0.28rem;
      }
    }
  }

  .item > div {
    width: 50%;
  }
}
</style>
